<template>
  <div :class="['artwork', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="banner">
      <img class="banner" :src="bannerList?.url" alt="">
    </div>
    <div class="artwork-title">
      <div class="left">
        <div class="chinese">
          精品推荐
        </div>
      </div>
    </div>
    <div class="artist-list">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide artist" v-for="(item, index) in recommList" @click="goDesc(item.data_id, item.work_type)" :key="item.data_id">
            <img :src="item.thumbnail" fit="cover" alt="" />
          </div>
        </div>
        <div v-if="$ua.isFromPc()" class="swiper-button-prev"></div>
        <div v-if="$ua.isFromPc()" class="swiper-button-next" ref="nextBtn"></div>
      </div>
    </div>
    <div class="recomm-list" v-for="(item, index) in recommList">
      <div class="text-content" v-if="!$ua.isFromPc()">
        <img v-if="!$ua.isFromPc()" class="img-right" :src="item.thumbnail" @click="goDesc(item.data_id, item.work_type)" alt="">
        <img src="../../static/img/arrowhead.png" v-if="$ua.isFromPc()" @click="goDesc(item.data_id, item.work_type)" alt="" class="arrowhead">
        <div class="title">
          {{ item.name }}
        </div>
        <div class="auth">
          {{ item.art_name }}
        </div>
        <div class="content">
          <span class="type">{{ series.find((s) => s.data_id == item.type_child)?.name }}</span>
          <span class="material">{{ item.material }}</span>
        </div>
        <div class="recommend-collect" @click="handleCollect(item.data_id, item.is_focus)">
          <img v-if="item.is_focus" src="@/static/img/favorite_grey_active.png" alt="">
          <img v-else src="@/static/img/favorite_grey.png" alt="">
          收藏{{ item.collect }}
        </div>
        <div class="desc-chinese">
          {{ item.work_detail }}
        </div>
        <img v-if="$ua.isFromPc()" class="img-right" :src="item.thumbnail" @click="goDesc(item.data_id, item.work_type)" alt="">
      </div>
    </div>
    <div class="art-work-type-list" ref="aaaa">
      <div class="left-menu">
        <ul>
          <li v-for="(item, index) in menuList" :key="item.data_id" @click="handleMenu(item, index)" :class="[index === active ? 'active-menu' : '']">
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="right-content">
        <div class="right-content-tab" ref="targetElement">
          <el-tabs v-if="$ua.isFromPc()" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="(item, index) in tagList" :label="item.name" :key="item.data_id" :name="item.data_id.toString()">
              <div class="work-list">
                <div class="content" v-for="item in workList" :key="item.data_id" @click="goDesc(item.data_id, item.work_type)">
                  <div class="img-box">
                    <img :src="item.thumbnail" alt="" />
                  </div>
                  <div class="info-box">
                    <div class="name" :title="item.name">
                      {{ item.name }}
                    </div>
                    <div class="art_name">
                      {{ item.art_name }}
                    </div>
                    <div class="desc">
                      <span class="content">
                        {{ item.opus_content }}
                      </span>
                      <span class="material">
                        {{ item.opus_material }}
                      </span>
                    </div>
                    <div class="collect">
                      <img src="@/static/img/favorite_grey.png" alt="">
                      {{ item.focus_total }}
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
          <div v-else-if="workList.length > 0" class="phone-content">
            <div class="content" v-for="item in workList" :key="item.data_id" @click="goDesc(item.data_id, item.work_type)">
              <el-image fit="cover" :src="item.thumbnail" alt="" />
              <div class="name" :title="item.name">
                {{ item.name }}
              </div>
              <div class="art_name">
                {{ item.art_name }}
              </div>
              <div class="desc">
                <span class="content">
                  {{ item.opus_content }}
                </span>
                <span class="material">
                  {{ item.opus_material }}
                </span>
              </div>
              <div class="collect">
                <img src="@/static/img/favorite_grey.png" alt="">
                {{ item.focus_total }}
              </div>
            </div>
          </div>
          <el-empty style="margin: 0 auto;background-color: #fff;" v-else description="暂无数据"></el-empty>
        </div>
        <div v-if="!$ua.isFromPc()" @click="lookMore" class="look-more" v-show="this.workList.length < this.tablePage.total">
          查看更多
        </div>
      </div>
    </div>
    <div class="pagination-box" v-if="$ua.isFromPc()">
      <el-pagination
        class="pagination"
        :page-size="tablePage.pageSize"
        :current-page="tablePage.pageNum"
        :total="tablePage.total"
        @current-change="handlePage"
        hide-on-single-page
        background
        layout="prev, pager, next"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getImgUrl } from '@/utils/downloadFile'
import { Swiper as SwiperClass, Navigation, Pagination } from 'swiper'
import 'swiper/swiper-bundle.css'
export default {
  scrollToTop: true,
  name: 'artWork',
  data() {
    return {
      bannerList: {},
      recommList: [],
      workList: [],
      menu: [],
      tagList: [],
      activeName: 0,
      activeMenu: {},
      menuList: [],
      active: 0,
      workType: '',
      series: [],
      bgcolor: [
        '#eae0d4',
        '#e5dbdd',
        '#ebe4d3',
        '#e4d5ce'
      ],
      swiper: null,
      tablePage: {
        pageNum: 1, // 第几页
        pageSize: 9, // 每页多少条
        total: 0 // 总记录数
      },
    }
  },
  // async asyncData({ $api }) {
  //   const response = await $api.artWorkList({})
  //   if (response.status == '$SUCCESS') {
  //     console.log('response.result.item_list111', response.result.item_list)
  //     return {
  //       recommList: response.result.item_list
  //     }
  //   }
  // },
  mounted() {
    if (this.$route.query.data_id) {
      setTimeout(() => {
        const targetElement = this.$refs.targetElement
        const topOffset = targetElement.offsetTop
        window.scrollTo({
          top: topOffset - 150,
          behavior: 'smooth'
        })
      }, 500);
    }
      SwiperClass.use([Navigation, Pagination])
      this.swiper = new SwiperClass('.swiper-container', {
        slidesPerView: '3',
        loopedSlides: 5,
        autoplay: true,
        observer: true,
        loop: true,
        observeParents: true,
        paginationClickable: true,
        // loopAdditionalSlides: 3,
        // noSwiping: true,
        autoplay: {
          delay: 1500,
          // disableOnInteraction: false,
        },
        spaceBetween: 24,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
          disabledClass: 'my-button-disabled'
        }
      })
    this.getProductType()
    // this.artWorkList({})
    this.getArtRecomment()
    this.bannerList = this.$store.state.router.router[0].children.filter(item => {
      return item.path === location.pathname
    })[0]?.meta?.banner_list[0]
    console.log('this.bannerList', this.bannerList)
    // this.getProductType({})
  },
  methods: {
    getImgUrl,
    lookMore() {
      const currentPage = this.tablePage.pageNum + 1
      this.handlePage(currentPage)
    },
    handleMove(index) {
      // clearInterval(this.timer)
      // this.showInfo = index
    },
    handleLeave() {
      this.timer = setInterval(() => {
        console.log('点击事件')
        if(this.$refs.nextBtn) {
          this.$refs.nextBtn.click()
        }
      }, 3000);
      this.showInfo = ''
    },
    handleCollect(work_id, is_focus) {
      if (this.$store.state.user.token) {
        if (!is_focus) {
          this.$api.workFocus({ work_id }, {}).then(res => {
            if (res.status == "$SUCCESS") {
              this.getArtRecomment()
              this.$message.success('收藏成功')
            }
          })
        } else {
          this.$message.warning('您已收藏该作品')
        }
      } else {
        this.$store.commit('user/SET_LOGIN', true)
        this.$message.error('请先登陆')
      }
    },
    getProductType() {
      this.$api.getProductType({}).then((res) => {
        this.series = Array.isArray(res.result.item_list)
          ? res.result.item_list
          : [];
        this.menuList = Array.isArray(res.result.item_list)
          ? res.result.item_list.filter(item => {
            return item.parent_id == -1
          })
          : [];
        if (this.$route.query.data_id) {
          // this.menuList
          console.log('this.menuList', this.menuList)
          let item = this.menuList.find(item => {
            console.log(item.data_id, this.$route.query.type)
            return item.data_id == this.$route.query.type
          })
          let index = this.menuList.findIndex(item => {
            return item.data_id == this.$route.query.type
          })
          console.log('筛选数据', item, index)
          // return false
          this.handleMenu(item, index)
          this.activeName = this.$route.query.data_id
        } else {
          console.log('获取菜单列表')
          this.handleMenu(this.menuList[0], 0)
        }
      });
    },
    handleClick(value) {
      console.log(value.name)
      const params = {
        page_num: this.tablePage.pageNum,
        page_count: this.tablePage.pageSize,
        type: this.activeMenu.data_id,
        type_child: value.name
      }
      this.artWorkList(params)
    },
    goDesc(data_id, type) {
      console.log(type)
      if (type == 1) {
        this.$router.push({ path: '/artwork/desc', query: { data_id, workType: this.workType } })
      } else if (type == 2) {
        this.$router.push({ path: '/onlineVideo/desc', query: { data_id, type } })
      }
    },
    // async getProductType() {
    //   const res = await this.$api.getProductType({})
    //   if (res.status == '$SUCCESS') {
    //     this.series = res.result.item_list
    //   }
    // },
    async getArtRecomment() {
      const res = await this.$api.workRecomment({ work_recommend: 1 })
      if (res.status == '$SUCCESS') {
        this.recommList = Array.isArray(res.result.item_list) ? res.result.item_list : []
        this.recommList.forEach(item => {
          item.img = getImgUrl('works', item.data_id, 'thumbnail')
        })
        this.recommList = this.recommList.splice(0, this.$ua.isFromPc() ? 8 : 4)
        console.log(this.recommList)
      }
    },
    // 翻页
    handlePage(currentPage) {
      // this.active = ''
      this.tablePage.pageNum = currentPage
      const params = {
        page_num: this.tablePage.pageNum,
        page_count: this.tablePage.pageSize,
        type: this.activeMenu.data_id,
        type_child: this.$ua.isFromPc() ? this.activeName : ''
      }
      this.artWorkList(params)
    },
    // 获取列表数据
    async artWorkList(params) {
      const res = await this.$api.artWorkList(params)
      if (res.status == '$SUCCESS') {
        if (this.$ua.isFromPc()) {
          this.workList = Array.isArray(res.result.item_list) ? res.result.item_list : []
          this.workList.forEach(item => {
            item.img = getImgUrl('works', item.data_id, 'thumbnail')
          })
        } else {
          if (Array.isArray(res.result.item_list)) {
            if (this.tablePage.pageNum == 1) this.workList = []
            res.result.item_list.forEach(item => {
              item.img = getImgUrl('works', item.data_id, 'thumnail')
              this.workList.push(item)
            })
          } else {
            this.workList = []
          }
        }
        this.tablePage.total = res.result.total_count
        console.log('this.workList', this.workList)
      }
    },
    handleMenu(item, index) {
      console.log('item, index', item, index)
      this.activeMenu = item
      this.active = index
      this.workType = item.name
      this.tagList = this.series.filter(i => {
        return item.data_id == i.parent_id
      })
      this.activeName = this.tagList[0]?.data_id.toString()
      console.log(this.tagList)
      this.tablePage.pageNum = 1
      const params = {
        page_num: this.tablePage.pageNum,
        page_count: this.tablePage.pageSize,
        type: item.data_id,
        type_child: this.$ua.isFromPc() ? this.activeName : ''
      }
      this.artWorkList(params)
    }
  }
}
</script>

<style lang='less'>
.artwork {
  &.z-web {
    background: #fff;

    .banner {
      width: 100%;
      height: 600px;
      object-fit: cover;
    }

    .image {
      width: 100%;
      height: 952px;
    }

    .artwork-title {
      padding: 140px 132px 108px 276px;
      // width: 1440px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      background-color: #eae0d4;

      .left {
        line-height: 45px;

        .chinese {
          font-size: 55px;
          font-weight: 600;
          color: #000;
        }
      }

      .right {
        display: flex;
        align-items: end;
        font-size: 25px;
        font-weight: 600;
        color: #000;

        p {
          height: 100%;
        }
      }
    }

    .artist-list {
      width: 1500px;
      // display: inline-block;
      margin: 30px auto;
      // margin-left: 30px;
      // position: relative;

      --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
      --swiper-navigation-color: #000;/* 单独设置按钮颜色 */
      --swiper-navigation-size: 30px;/* 设置按钮大小 */
      position: relative;
    }

    .swiper-slide {
      width: 484px;
      height: 617px;
    }

        .swiper-button-next {
          margin-right: 10px;
        }

        .swiper-button-prev, .swiper-button-next {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background-color: #000;
          opacity: 0.3;
        }

        .swiper-button-next:after,
        .swiper-button-prev:after {
          color: #fff;
        }

        .artist {
          width: 486px;
          height: 617px;
          cursor: pointer;
          position: relative;
          display: inline-block;
          margin-right: 27px;

          &:nth-child(3n) {
            margin-right: 0;
          }

          .info {
            width: 100%;
            position: absolute;
            bottom: 54px;
            left: 0;
            text-align: center;
            // height: 100%;
            letter-spacing: 5px;

            .name {
              font-size: 24px;
              font-weight: 600;
              color: #000;
              margin-bottom: 15px;
              // letter-spacing: 5px;
            }

            .quantity {
              font-size: 16px;
              font-weight: 800;
              color: #626262;
            }
          }

          img {
            height: 617px;
            width: 484px;
            object-fit: cover;
          }
        }

    .recomm-list {
      // padding: 260px 132px 0 276px;
      position: relative;
      // width: 1440px;
      max-height: 600px;
      margin: 0 auto;

      .text-content {
        // width: 684px;
        line-height: 16px;
        font-size: 16px;
        font-weight: bold;
        color: #999999;
        // position: relative;

        .arrowhead {
          width: 66px;
          height: 70px;
          position: absolute;
          left: 276px;
          top: 100px;
          cursor: pointer;
        }

        .title {
          line-height: 25px;
          font-size: 26px;
          font-weight: 800;
          color: #000;
          margin-bottom: 16px;
        }

        .auth,
        .content {
          margin-bottom: 18px;
        }

        .recommend-collect {
          color: #999;
          font-size: 16px;
          line-height: 12px;
          cursor: pointer;
          margin-bottom: 60px;

          img {
            // width: 30px;
            width: 16px;
            height: 16px;
            position: relative;
            top: -3px;
            margin-right: 9px;
          }
        }

        .desc-chinese {
          font-size: 18px;
          color: #000;
          font-weight: 300;
          line-height: 37px;
          height: 260px;
        }
        .img-right {
          cursor: pointer;
          position: absolute;
          right: 132px;
          top: 100px;
          min-width: 710px;
          min-height: 200px;
          max-height: 400px;
          max-width: 1200px;
          object-fit: cover;
        }
      }
    }

    .art-work-type-list {
      padding: 100px 240px 0 220px;
      display: flex;

      .right-content {
        width: 100%;
        vertical-align: top;

        .right-content-tab {
          .work-list {
            display: grid;
            justify-content: space-between;
            grid-template-columns: repeat(auto-fill, 410px);
            grid-gap: 10px;
          }
          .content {
            width: 390px;
            height: 570px;
            font-size: 16px;
            color: #999;
            font-weight: bold;
            cursor: pointer;
            margin-bottom: 40px;
            padding-top: 20px;
            box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5);

            .img-box {
              height: 400px;
              text-align: center;
              margin-bottom: 10px;
              img {
                height: 100%;
                width: 90%;
                object-fit: contain;
              }
            }

            .info-box {
              padding: 0 20px;

              .name {
                width: 500px;
                color: #000;
                font-weight: 600;
                margin-bottom: 17px;
                overflow: hidden; //超出的文本隐藏
                text-overflow: ellipsis; //溢出用省略号显示
                white-space: nowrap;
              }
              .art_name,
              .desc {
                color: #999;
                margin-bottom: 17px;
              }
              .collect {
                img {
                  // width: 30px;
                  width: 18px;
                  height: 18px;
                  position: relative;
                  top: -3px;
                  margin-right: 5px;
                }
              }
            }
          }
        }
      }

      .left-menu {
        margin-right: 109px;

        ul {
          width: 100px;
          margin-top: 48px;

          li {
            line-height: 23px;
          font-size: 24px;
          font-weight: bold;
          color: #898989;
          margin-bottom: 34px;
          cursor: pointer;
        }

        .active-menu {
          color: #000;
        }
      }
    }
  }

  .pagination-box {
    text-align: center;
  }
  }

  &.z-phone {
    .banner {
      .banner {
        width: 100%;
        height: pxtorem(388);
        object-fit: cover;
      }
    }

    .artwork-title {
      padding: pxtorem(31) 0 pxtorem(41) pxtorem(32);
      .left {
        .chinese {
          font-size: pxtorem(44);
          color: #000;
          font-weight: 600;
          letter-spacing: pxtorem(5);
        }
      }
    }

    .artist-list {
      padding: 0 pxtorem(25);
    }

    .swiper-slide {
      width: pxtorem(288);
      height: pxtorem(384);
    }

    .swiper-button-next {
      margin-right: 15px;
    }

    .artist {
      width: pxtorem(288);
      height: pxtorem(384);
      cursor: pointer;
      position: relative;
      display: inline-block;
      margin-right: pxtorem(27);

      &:nth-child(3n) {
        margin-right: 0;
      }

      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }

    .recomm-list {
      .text-content {
        width: 100%;
        // max-height: pxtorem(796);
        padding: pxtorem(32) pxtorem(32) pxtorem(60);

        .img-right {
          width: 100%;
          height: pxtorem(796);
          object-fit: cover;
          margin-bottom: pxtorem(32);
        }

        .title {
          font-size: pxtorem(26);
          font-weight: 800;
          color: #000;
          margin-bottom: pxtorem(16);
        }

        .auth,
        .content,
        .recommend-collect {
          font-size: pxtorem(22);
          font-weight: bold;
          color: #999;
          margin-bottom: pxtorem(11);
        }
      }
    }

    .art-work-type-list {
      .left-menu {
        ul {
          display: flex;
          flex-wrap: wrap;
          margin-top: pxtorem(40);
          margin-bottom: pxtorem(28);

          li {
            font-size: pxtorem(24);
            font-weight: bold;
            color: #898989;
            flex: 25%;
            text-align: center;
            margin-bottom: pxtorem(32);

            &.active-menu {
              color: #000;
              position: relative;
            }

            &.active-menu::after {
              content: '';
              width: pxtorem(108);
              height: pxtorem(4);
              background-color: #000;
              position: absolute;
              bottom: pxtorem(-6);
              left: pxtorem(40);
            }
          }
        }
      }

      .right-content {
        padding: 0 pxtorem(32) pxtorem(60);

        .phone-content {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
        }

        .content {
          width: pxtorem(330);
          margin-bottom: pxtorem(45);

          .name {
            font-size: pxtorem(22);
            font-weight: bold;
            color: #000;
            margin-top: pxtorem(16);
            margin-bottom: pxtorem(14);
          }

          .art_name,
          .desc {
            font-size: pxtorem(22);
            font-weight: bold;
            color: #999;
            margin-bottom: pxtorem(14);
          }

          .collect {
            display: flex;
            align-items: center;

            img {
              margin-right: pxtorem(5);
            }
          }
        }
      }
    }
  }
}
</style>